<template>
  <div class="home">
    <header class="tc ">
      <h1 class="title pr pr20 pl20 f35 cfff fn">
        <router-link class="img pa cfff" to="/upConfirmOrder">
          <i class="el-icon-arrow-left  f40 "></i>
        </router-link>
        选择车辆
      </h1>
    </header>
    <main class="p20">
      <section class="bcfff f20 mb20" v-for="el in arr">
        <ul class="p10 flex jcsb">
          <li class="flex ">
            <img src="" class="car mr30">
            <div class="aic">
              <h2 class="f30 mb30">车型:{{ el.carName }}</h2>
              <p class="f25">车牌:{{ el.carId }}</p>
            </div>
          </li>
          <li class="asc">
            <a href="#">
              <img class="select" :src="el.url">
            </a>
          </li>
        </ul>
      </section>
    </main>
    <ul class="footer  bcff bs  tc pf w100 jcsb f20">
      <li>
        <a href="#" class="pay-order f25 cfff ">
          <img class="add" src="../../../assets/img/wash-car-img/add.png" alt=""> 添加车辆
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          carName: "奔驰-GR",
          carId: "豫M35468",
          url: require("../../../assets/img/wash-car-img/right-red.png")
        },
        {
          carName: "奔驰-GR",
          carId: "豫M35468",
          url: require("../../../assets/img/wash-car-img/circle.png")
        }
      ]

    }
  }
}
</script>
<style scoped>
.mb35 {
  margin-bottom: 35rem;
}

.asc {
  align-self: center;
}

.line {
  height: 1rem;
  background-color: #f7f7f7;
}

.line-dash {
  border: dashed 2rem;
}

.home {
  background-color: #f7f7f7;
}

/* 头部样式  ---需要可剪切 */
header .title {
  height: 145rem;
  line-height: 145rem;
}

header {
  height: 435rem;
  background-color: #3385fd;
}

header .img {
  width: auto;
  left: 20rem;
  top: 0;
}

main {
  margin-top: -310rem;
}

/* 手机端必须加上这一句--体验感 */
main {
  margin-bottom: 120rem;
}

main section {
  padding: 40rem 30rem;
  border-radius: 20rem;
  box-sizing: border-box;
}

main section ul li img.car {
  width: 110rem;
  height: 110rem;
  background-color: red;
  border-radius: 50%;
}

main section ul li img.select {
  width: 40rem;
  height: auto;
}

/* 页脚 */
ul.footer {
  height: 115rem;
  left: 0;
  bottom: 0;
  padding: 0 20rem;
  background-color: #fff;
  line-height: 115rem;
}

ul.footer a.pay-order {
  background-color: #1e72f0;
  padding: 20rem 255rem;
  border-radius: 50rem;
}

ul.footer a.pay-order img.add {
  width: 23rem;
  height: auto;
  vertical-align: middle;
  margin-top: -2rem;
}</style>